<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		
		<div id="app" @click="">
			{{num}}
			<button style="border-radius: 100%;width: 30px;height: 30px;" type="button" @click.stop="addnum()">冲</button>
			<a href="http://www.baidu.com" @click.prevent="getMsg()()">百度</a>
			<input type="text" @keyup.left="handler()"/>
			<br>
			<input type="number"  @keyup.enter="sum" v-model="num1" name="" id="" value="" />
			<br>
			<input type="number" @keyup.enter="sum" name="" id="" v-model="num2" value="" />
			<button @keyup.enter="sum" @click="sum" type="button">计算</button>
			<a href="http://www.baidu.com">百度未绑定</a>
			<a v-bind:href="url">百度绑定</a>
			<h1 >{{num3}}</h1>
			<input type="text" name="" id="" value="" v-model.lazy="lengt"/>
			<span id="">
				反转字符
			</span>
			<span id="">
				<!--  -->
				{{reverse}}
			</span>
		</div>
	</body>
</html>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> 
	var v=new Vue({
		el:"#app",
		data:{
			num:"别冲了别冲了",
			num1:"",
			num2:"",
			num3:"",
			url:"http://www.baidu.com",
			lengt:""
		},
		methods:{
			addnum(){
				this.num+="冲你妈臭嗨";
			},
			getMsg(){
				console.log("nmsl")
			},
			handler(){
				console.log("你妈没了")
			},
			sum(){
				this.num3=parseInt(this.num1)+parseInt(this.num2);
				console.log("we")
			}
		},
		computed:{
			reverse(){
				return this.lengt.split("").reverse().join("");
			}
		}
	});
</script>
